<template>
  <el-dialog v-model="store.hobby.isShow" title="选择我的兴趣技能" width="900px">
    <el-input
      @input="inputHandler"
      class="search"
      placeholder="搜索兴趣技能"
      :prefix-icon="Search"
      v-model="searchInput"
      clearable
    />
    <el-button
      @click="search"
      class="search-btn"
      type="primary"
      :disabled="searchInput ? false : true"
      >搜索</el-button
    >
    <el-form label-position="left" label-width="auto" class="mt-60">
      <el-tag
        v-for="tag in store.hobby.userHobby"
        :key="tag"
        class="tag"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
      >
        {{ tag }}
      </el-tag>
    </el-form>
    <div class="text">
      推荐兴趣技能
      <span class="span"
        >&nbsp;&nbsp;&nbsp;( {{ store.hobby.userHobby.length }}/7 )</span
      >
    </div>
    <el-form >
      <div class="hobbylist" @click="selectHandler($event)">
        <el-checkbox-group v-model="store.hobby.userHobby" :max="7">
          <el-checkbox
          v-for="item in store.hobby.filterHobbies"
          :key="item.id"
          :label="item.name"
          size="large"
          class="checkbox"
          border
        />
        </el-checkbox-group>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="store.hobby.isShow = false" size="large"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="store.hobby.isShow = false"
          size="large"
          color="#f93684"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { useUserInfoStore } from "@/stores/userInfo";
import { onMounted, ref, watch } from "vue";


const searchInput = ref("");
const store = useUserInfoStore();

//删除兴趣技能
const handleClose = (tag: string) => {
  store.hobby.userHobby.splice(store.hobby.userHobby.indexOf(tag), 1);
};

//添加兴趣技能
const selectHandler = (e: any) => {
  if(e.target.value&&store.hobby.userHobby.includes(e.target.value)){
    store.hobby.userHobby.splice(store.hobby.userHobby.indexOf(e.target.value), 1);
    return
  }
  if(e.target.value&&store.hobby.userHobby.length<7){
    store.hobby.userHobby.push(e.target.value);
  }
}
onMounted(()=>{
  store.hobby.filterHobbies = store.hobby.hobbyList
})
// watch(store.hobby.filterHobbies,()=>{
//     if(searchInput.value==""){
//       store.hobby.filterHobbies = store.hobby.hobbyList
//     }
//  },{immediate:true}
// )
const inputHandler = ()=>{
  if(!searchInput.value){
    store.hobby.filterHobbies = store.hobby.hobbyList
  }
}
const search = ()=>{
  
  store.hobby.filterHobbies=store.hobby.filterHobbies.filter(item=>item.name.includes(searchInput.value))
}
</script>

<style scoped>
  
.search {
  width: 300px;
  height: 40px;
  position: absolute;
  left: 30px;
  border-radius: 4px;
}
.search-btn {
  width: 70px;
  height: 40px;
  position: absolute;
  left: 340px;
}
.tag {
  width: 100px;
  height: 40px;
  text-align: center;
  margin-left: 10px;
  font-size: 15px;
  color: black;
  background-color: #fff;
  border: solid 0.5px #eee;
}
.mt-60 {
  margin-top: 60px;
  text-align: left;
}
.text {
  text-align: left;
  font-size: 16px;
  margin-top: 20px;
  color: black;
}
.span {
  color: #aaa;
}

.hobbylist {
  text-align: left;
  margin-top: 15px;
  margin-left: 10px;
}
.checkbox {
  width: 110px;
  margin-top: 10px;
}
</style>
